<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS3和SVG实现的圆环菜单动画DEMO演示</title>

  <!--可无视-->
  <link rel="stylesheet" type="text/css" href="css/demo.css">
  <link href="https://fonts.googleapis.com/css?family=Poppins:200,400" rel="stylesheet">

  <!--核心-->
  <link rel="stylesheet" href="css/style.css">

</head>

<body>
  <!-- <div style="text-align:center;clear:both;">
    <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
    <script src="/follow.js" type="text/javascript"></script>
  </div> -->
  <div class="main">
    <div class="navigation-circle">
      <div class="navigation-circle__inner">
        <svg class="navigation-circle-svg navigation-circle-svg--opaque" version="1.1"
          xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="0 0 320 320"
          style="enable-background:new 0 0 320 320;">
          <circle cx="160" cy="160" r="158" fill="none" stroke-width="1" stroke="#c644fc" stroke-linecap="round"
            stroke-miterlimit="10" style="stroke-dashoffset:0;stroke-dasharray:none;"></circle>
        </svg>
        <svg class="navigation-circle-svg navigation-circle-svg--mask" version="1.1" xmlns="http://www.w3.org/2000/svg"
          x="0px" y="0px" viewbox="0 0 320 320" style="enable-background:new 0 0 320 320;">
          <circle id="mask-circle" cx="160" cy="160" r="158" fill="none" stroke-width="2" stroke="#c644fc"
            stroke-linecap="round" stroke-miterlimit="10" style="stroke-dasharray:1005.3088px;"></circle>
        </svg>
        <ul class="navigation-circle__list">
          <li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onClick="onClick(1)"
              onmouseenter="calculateOffset(1)" onMouseLeave="onMouseLeave()">
              <div class="navigation-circle-list-item__meta">
                <h3 class="navigation-circle-list-item__title">Item #1
                </h3>
                <h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
              </div>
            </a></li>
          <li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onClick="onClick(2)"
              onmouseenter="calculateOffset(2)" onMouseLeave="onMouseLeave()">
              <div class="navigation-circle-list-item__meta">
                <h3 class="navigation-circle-list-item__title">Item #2
                </h3>
                <h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
              </div>
            </a></li>
          <li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onClick="onClick(3)"
              onmouseenter="calculateOffset(3)" onMouseLeave="onMouseLeave()">
              <div class="navigation-circle-list-item__meta">
                <h3 class="navigation-circle-list-item__title">Item #3
                </h3>
                <h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
              </div>
            </a></li>
          <li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onClick="onClick(4)"
              onmouseenter="calculateOffset(4)" onMouseLeave="onMouseLeave()">
              <div class="navigation-circle-list-item__meta">
                <h3 class="navigation-circle-list-item__title">Item #4
                </h3>
                <h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
              </div>
            </a></li>
          <li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onClick="onClick(5)"
              onmouseenter="calculateOffset(5)" onMouseLeave="onMouseLeave()">
              <div class="navigation-circle-list-item__meta">
                <h3 class="navigation-circle-list-item__title">Item #5
                </h3>
                <h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
              </div>
            </a></li>
          <li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onClick="onClick(6)"
              onmouseenter="calculateOffset(6)" onMouseLeave="onMouseLeave()">
              <div class="navigation-circle-list-item__meta">
                <h3 class="navigation-circle-list-item__title">Item #6
                </h3>
                <h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
              </div>
            </a></li>
          <li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onClick="onClick(7)"
              onmouseenter="calculateOffset(7)" onMouseLeave="onMouseLeave()">
              <div class="navigation-circle-list-item__meta">
                <h3 class="navigation-circle-list-item__title">Item #7
                </h3>
                <h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
              </div>
            </a></li>
        </ul>
      </div>
    </div>
  </div>

  <script src="js/index.js"></script>

</body>

</html>